<%@ include file="../common/header.jsp" %>

<div class="content">
    <%@ include file="../common/top_nav.jsp" %>

    <div class="container mt-4">
        <h2>费用信息管理</h2>

        <!-- 新增按钮 -->
        <button class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#feeModal"
                onclick="prepareAddFee()">新增费用
        </button>

        <!-- 费用信息列表 -->
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>住户ID</th>
                <th>费用类型</th>
                <th>金额</th>
                <th>到期日期</th>
                <th>支付日期</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach var="fee" items="${list}">
                <tr>
                    <td>${fee.residentId}</td>
                    <td>${fee.feeType}</td>
                    <td>${fee.amount}</td>
                    <td>${fee.dueDate}</td>
                    <td>${fee.paidDate != null ? fee.paidDate : '暂无'}</td>
                    <td>${fee.status}</td>
                    <td>
                        <button class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#feeModal"
                                onclick="prepareEditFee(${fee.id})">编辑</button>
                        <a href="<c:url value='/fee/delete/${fee.id}'/>"
                           class="btn btn-danger btn-sm">删除</a>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>

<!-- 新增/编辑费用 模态框 -->
<div class="modal fade" id="feeModal" tabindex="-1" aria-labelledby="feeModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="feeForm" action="<c:url value='/fee/add'/>" method="post">
                <div class="modal-header">
                    <h5 class="modal-title" id="feeModalLabel">费用信息</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="id" name="id"/>

                    <div class="mb-3">
                        <label for="residentId" class="form-label">住户ID</label>
                        <input type="number" class="form-control" id="residentId" name="residentId" required>
                    </div>

                    <div class="mb-3">
                        <label for="feeType" class="form-label">费用类型</label>
                        <select class="form-select" id="feeType" name="feeType" required>
                            <option value="">请选择</option>
                            <option value="物业费">物业费</option>
                            <option value="水费">水费</option>
                            <option value="电费">电费</option>
                            <option value="其他">其他</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="amount" class="form-label">金额</label>
                        <input type="number" step="0.01" class="form-control" id="amount" name="amount" required>
                    </div>

                    <div class="mb-3">
                        <label for="dueDate" class="form-label">到期日期</label>
                        <input type="date" class="form-control" id="dueDate" name="dueDate" required>
                    </div>

                    <div class="mb-3">
                        <label for="paidDate" class="form-label">支付日期</label>
                        <input type="date" class="form-control" id="paidDate" name="paidDate">
                    </div>

                    <div class="mb-3">
                        <label for="status" class="form-label">状态</label>
                        <select class="form-select" id="status" name="status" required>
                            <option value="">请选择</option>
                            <option value="未支付">未支付</option>
                            <option value="已支付">已支付</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success">保存</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                </div>
            </form>
        </div>
    </div>
</div>

<%@ include file="../common/footer.jsp" %>
<script>
    function prepareAddFee() {
        document.getElementById("feeModalLabel").innerText = "新增费用";
        document.getElementById("feeForm").action = "<c:url value='/fee/add'/>";
        document.getElementById("id").value = "";
        document.getElementById("residentId").value = "";
        document.getElementById("feeType").value = "";
        document.getElementById("amount").value = "";
        document.getElementById("dueDate").value = "";
        document.getElementById("paidDate").value = "";
        document.getElementById("status").value = "";
    }

    function prepareEditFee(id) {
        fetch("<c:url value='/fee/get/'/>" + id, {
            headers: {
                "Accept": "application/json"
            }
        })
            .then(response => {
                if (!response.ok) throw new Error("网络错误: " + response.status);
                return response.json();
            })
            .then(data => {
                document.getElementById("feeModalLabel").innerText = "编辑费用";
                document.getElementById("feeForm").action = "<c:url value='/fee/update'/>";
                document.getElementById("id").value = data.id;
                document.getElementById("residentId").value = data.residentId;
                document.getElementById("feeType").value = data.feeType;
                document.getElementById("amount").value = data.amount;
                document.getElementById("dueDate").value = data.dueDate;
                document.getElementById("paidDate").value = data.paidDate || "";
                document.getElementById("status").value = data.status;
            })
            .catch(error => {
                console.error("请求失败:", error);
                alert("获取费用信息失败！");
            });
    }
</script>
